<template>
  <div class="">
    <van-nav-bar title="城市列表" left-arrow @click-left="$router.go(-1)" />

    <!-- 索引列表 -->
    <van-index-bar>
      <van-index-anchor index="1">当前城市</van-index-anchor>
      <van-cell title="上海" />

      <van-index-anchor index="2">热门城市</van-index-anchor>
      <van-cell title="北京" />
      <van-cell title="上海" />
      <van-cell title="文本" />
      <van-cell title="文本" />
    </van-index-bar>

    <van-index-bar :index-list="indexList">
      <van-index-anchor index="A" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />

      <van-index-anchor index="B" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />

      ...
    </van-index-bar>
  </div>
</template>
<script>
import { GetCityList } from '@/api/lookfor'

export default {
  name: 'ListsOfCities',
  props: {},
  components: {},
  data () {
    return {
      list: [],
      level: 1,
      indexList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  },
  async created () {
    // 获取城市列表
    const { body } = await GetCityList(this.level)
    console.log(body)
    this.list = this.body
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: #1cb676;
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
::v-deep .van-nav-bar__title {
  color: #fff;
}
</style>
